<template>
  <div class="multi-tab">
    <a-tabs
      v-model:activeKey="activeKey"
      :tabBarStyle="{ margin: 0 }"
      type="editable-card"
      hideAdd
      @edit="remove"
      @tabClick="active"
    >
      <a-tab-pane
        v-for="page in items"
        :key="page.fullPath"
        :closable="page.closable"
      >
        <template #tab>
          <a-dropdown :trigger="['contextmenu']">
            <span style="display: inline-block">
              <ReloadOutlined
                v-if="activeKey == page.fullPath"
                :spin="page.loading"
                @click="onRefresh(page)"
              />
              {{ page.title }}
            </span>
            <template #overlay>
              <a-menu>
                <a-menu-item key="1" @click="close()"> 关闭所有 </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts">
import { Tabs, Dropdown, Menu } from 'ant-design-vue'
import { ReloadOutlined } from '@ant-design/icons-vue'
import { defineComponent, inject } from 'vue'
import { useMultiTab } from './useMultitTab'

export default defineComponent({
  name: 'multi-tab',
  components: {
    ReloadOutlined,
    ATabs: Tabs,
    ATabPane: Tabs.TabPane,
    ADropdown: Dropdown,
    AMenu: Menu,
    AMenuItem: Menu.Item,
  },
  setup(props) {
    const { activeKey, remove, active, items, removeAll } = useMultiTab()

    const onRefresh = inject('reload')

    const close = () => {
      removeAll()
    }

    return {
      close,
      activeKey,
      onRefresh,
      remove,
      active,
      items,
    }
  },
})
</script>
<style lang="less" scoped>
.multi-tab {
  margin: 0 16px;
  margin-top: 10px;
}
</style>
